<template>
    <div class="goods-view public-box">
        <Row>
            <Col span="20">
                 <Form inline>
                     <Form-item label="名称" :label-width="80">
                        <Input v-model="name" placeholder="请输入"></Input>
                    </Form-item>
                    <Form-item label="选择分类" :label-width="100">
                         <Select v-model="goodsCategory" placeholder="选择分类">
                            <Option value="beijing">北京市</Option>
                            <Option value="shanghai">上海市</Option>
                            <Option value="shenzhen">深圳市</Option>
                        </Select>
                    </Form-item>
                </Form>
            </Col>
            <Col span="4">
                <Button @click="handleAddClick" type="primary" icon="plus-round" style="float: right">新增商品</Button>
            </Col>
        </Row>
        <div class="table-box">
            <Table height="400" :columns="columns1" :data="data2"></Table>
        </div>
    </div>
</template>

<script>
import api from '@/api';
export default {
    name: 'goodsView',
    data () {
        const _this = this;
        return {
            name: '',
            goodsCategory: '',
            columns1: [
                    {
                        title: '商品名称',
                        key: 'name'
                    }, {
                        title: '商品分类',
                        key: 'goodsCategory'
                    }, {
                        title: '价格',
                        key: 'price'
                    }, {
                        title: '上架时间',
                        key: 'startDate'
                    }, {
                        title: '操作',
                        key: 'action',
                        width: 200,
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            this.show(params.index)
                                        }
                                    }
                                }, '编辑'),
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            this.show(params.index)
                                        }
                                    }
                                }, '查看'),
                                h('Button', {
                                    props: {
                                        type: 'error',
                                        size: 'small'
                                    },
                                    on: {
                                        click: () => {
                                            console.log(params.row.id);
                                             _this.$Modal.confirm({
                                                title: '提示',
                                                content: '是否删除本条数据？',
                                                onOk: () => {
                                                    _this.$Message.info(`删除的id是${params.row.id}`);
                                                },
                                                onCancel: () => {
                                                    _this.$Message.info('点击了取消');
                                                }
                                            });
                                        }
                                    }
                                }, '删除')
                            ]);
                        }
                    }
            ],
            data2: [
                    {
                        id: 1,
                        name: '王小明',
                        goodsCategory: 'A类',
                        price: 18,
                        startDate: '2017-08-27'
                    },
                    {
                        id: 2,
                        name: '王小明',
                        goodsCategory: 'A类',
                        price: 18,
                        startDate: '2017-08-27'
                    },
                    {
                       id: 3,
                        name: '王小明',
                        goodsCategory: 'A类',
                        price: 18,
                        startDate: '2017-08-27'
                    },
                    {
                        id: 4,
                        name: '王小明',
                        goodsCategory: 'A类',
                        price: 18,
                        startDate: '2017-08-27'
                    },
                    {
                       id: 5,
                        name: '王小明',
                        goodsCategory: 'A类',
                        price: 18,
                        startDate: '2017-08-27'
                    },
                    {
                        id: 6,
                        name: '王小明',
                        goodsCategory: 'A类',
                        price: 18,
                        startDate: '2017-08-27'
                    },
                    {
                        id: 7,
                        name: '王小明',
                        goodsCategory: 'A类',
                        price: 18,
                        startDate: '2017-08-27'
                    },
                    {
                        name: '周小伟',
                        age: 26,
                        address: '深圳市南山区深南大道'
                    },
                    {
                       id: 1,
                        name: '王小明',
                        goodsCategory: 'A类',
                        price: 18,
                        startDate: '2017-08-27'
                    },
                    {
                       id: 1,
                        name: '王小明',
                        goodsCategory: 'A类',
                        price: 18,
                        startDate: '2017-08-27'
                    },
                    {
                        name: '李小红',
                        age: 30,
                        address: '上海市浦东新区世纪大道'
                    },
                    {
                       id: 1,
                        name: '王小明',
                        goodsCategory: 'A类',
                        price: 18,
                        startDate: '2017-08-27'
                    },
                    {
                        id: 1,
                        name: '王小明',
                        goodsCategory: 'A类',
                        price: 18,
                        startDate: '2017-08-27'
                    },
                    {
                       id: 1,
                        name: '王小明',
                        goodsCategory: 'A类',
                        price: 18,
                        startDate: '2017-08-27'
                    },
                    {
                        id: 1,
                        name: '王小明',
                        goodsCategory: 'A类',
                        price: 18,
                        startDate: '2017-08-27'
                    },
                    {
                        id: 1,
                        name: '王小明',
                        goodsCategory: 'A类',
                        price: 18,
                        startDate: '2017-08-27'
                    }
                ]
        }
    },
    watch: {
        name () {
            console.log('按商品名称查询！');
        },
        goodsCategory () {
            console.log('按商品分类查询');
        }
    },
    methods: {
        fetchGoodsList () {
            const params = {
                name: this.name,
                limit: 20,
                page: 1
            }
            this.$post(api.fetchGoodsList, params).then((res) => {
                console.log(res);
            }).catch(() =>{})
        },
        handleAddClick () {

        }
    },
    mounted () {
        this.fetchGoodsList();
    }
}
</script>

<style lang="less">
.goods-view {
    .table-box {
        position: absolute;
        top: 40px;
        left: 0px;
        right: 0px;
        bottom: 0px;
        background: #f00;
    }
    .ivu-input-wrapper,
    .ivu-select-single .ivu-select-selection {
        width: 170px;
    }
}
</style>